<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>源头设置</title>
		<link rel="stylesheet" type="text/css" href="../css/vue.css"/>
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<link rel="stylesheet" type="text/css" href="../css/sourceSetting.css"/>
	</head>
	<body class="sourceSettingBox">
		<!--公共头部 start-->
		<div class="commonHead">
			<div class="commonHeadLeft">
				<a href="javascript:void(0);"><img src="../img/indexLogo.png" class="houseLogo"/></a>
			</div>
			<div class="commonHeadCenter">
				<ul>
					<li>
						<a class="active">项目圈</a>
					</li>
					<li>
						<a>材料数据库</a>
					</li>
					<li>
						<a>计算工具</a>
					</li>
					<li class="clear"></li>
				</ul>
			</div>
			<div class="commonHeadRight">
				<div class="infoCenter">
					<a href="javascript:void(0);">
						<span class="iconfont-tcl">&#xe643;</span>
						<span class="infoCenterText">消息中心</span>
						<span class="remindCircle"></span>
					</a>
				</div>
				<div class="loginInfo">
					<el-dropdown trigger="click">
						<span class="el-dropdown-link">
						    Kdd<i class="el-icon-caret-bottom el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
						    <el-dropdown-item>账号设置</el-dropdown-item>
						    <el-dropdown-item>退出</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>	
				<div class="clear"></div>
			</div>
			<div class="clear"></div>
		</div>
		<!--公共头部 end-->
		
		<!--内容 start-->
		<div class="computedContent">
			<!--项目圈内容 start-->
			<div class="sourceSetting">
				<div class="projectBox wayDesign1StepStatusBox">
					<div class="stepStatus">
						<div class="step">
							<div class="stepDec active">
								<div class="stepNum"><i class="el-icon-check"></i></div>
								<div class="stepName">建筑信息</div>
							</div>
							<div class="stepLine">
								<div class="prepareLine hidden"></div>
								<div class="finishLine "></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="step">
							<div class="stepDec active">
								<div class="stepNum"><i class="el-icon-check"></i></div>
								<div class="stepName">控制目标</div>
							</div>
							<div class="stepLine">
								<div class="prepareLine hidden"></div>
								<div class="finishLine "></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="step">
							<div class="stepDec active">
								<div class="stepNum">3</div>
								<div class="stepName">源头设置</div>
							</div>
							<div class="stepLine">
								<div class="prepareLine"></div>
								<div class="finishLine hidden"></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="step">
							<div class="stepDec">
								<div class="stepNum">4</div>
								<div class="stepName">时间设置</div>
							</div>
							<div class="stepLine">
								<div class="prepareLine"></div>
								<div class="finishLine hidden"></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="step">
							<div class="stepDec">
								<div class="stepNum">5</div>
								<div class="stepName">通风设置</div>
							</div>
							<div class="stepLine">
								<div class="prepareLine"></div>
								<div class="finishLine hidden"></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="step">
							<div class="stepDec">
								<div class="stepNum">6</div>
								<div class="stepName">计算结果</div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="clear"></div>
					</div>
				</div>
				
				<div class="projectBox">
					<!--房间名-->
					<ul class="roomNameForm">
						<li class="roomName" :class="{roomActiveName:roomNameIndex == index}" v-text="roomName" v-for="(roomName,index) in roomNameForm" @click="activeMenu(index)"></li>
						<li class="clear"></li>
					</ul>
					
					<!--房间信息-->
					<ul class="roomInfoForm">
						<li class="roomInfoList" v-for="(roomInfoList,index) in roomInfoForm" v-show="index == roomNameIndex">
							<div class="sourceSelectBtnBox">
								<button class="greenLargerBtn mr10 chemistrySelect" @click="chemistryVisible = true">化学污染源选择</button>
								<button class="greenLargerBtn mr10 particleSelect" @click="particleVisible = true">颗粒物源选择</button>
								<button class="greenLargerBtn mr10 carbonSelect" @click="carbonVisible = true">二氧化碳源选择</button>
							</div>
							
							<ul class="chemistrySourceForm">
								<li class="chemistrySourceFormName">化学污染源</li>
								<li class="chemistrySourceFormTitle">
									<div class="type">材料类型</div>
									<div class="area">用料总面积</div>
									<div class="picture">图片</div>
									<div class="brand">品牌</div>
									<div class="model">型号</div>
									<div class="controlRequestBox">
										<div class="controlRequest">控制要求</div>
										<div class="controlConsumption">
											<div class="wid20 tac fl">
												<p>甲醛</p>
												<p>(mg/m2-h)</p>
											</div>
											<div class="wid20 tac fl">
												<p>TOVC</p>
												<p>(mg/m2-h)</p>
											</div>
											<div class="wid20 tac fl">
												<p>苯</p>
												<p>(mg/m2-h)</p>
											</div>
											<div class="wid20 tac fl">
												<p>甲苯</p>
												<p>(mg/m2-h)</p>
											</div>
											<div class="wid20 tac fl">
												<p>二甲苯</p>
												<p>(mg/m2-h)</p>
											</div>
											<div class="clear"></div>
										</div>
									</div>
									<div class="operation">操作</div>
									<div class="clear"></div>
								</li>
								<li class="chemistrySourceFormInfo" v-for="chemistrySourceFormInfo in roomInfoList.chemistrySourceForm">
									<div class="typeVal" v-text="chemistrySourceFormInfo.typeVal"></div>
									<div class="areaVal" v-text="chemistrySourceFormInfo.areaVal"></div>
									<div class="pictureVal">
										<img :src="chemistrySourceFormInfo.pictureVal"/>
									</div>
									<div class="brandVal" v-text="chemistrySourceFormInfo.brandVal"></div>
									<div class="modelVal" v-text="chemistrySourceFormInfo.modelVal"></div>
									<div class="controlRequestValBox">
										<div class="wid20 tac fl" v-text="chemistrySourceFormInfo.jiaquan"></div>
										<div class="wid20 tac fl" v-text="chemistrySourceFormInfo.TOVC"></div>
										<div class="wid20 tac fl" v-text="chemistrySourceFormInfo.ben"></div>
										<div class="wid20 tac fl" v-text="chemistrySourceFormInfo.jiaben"></div>
										<div class="wid20 tac fl" v-text="chemistrySourceFormInfo.erjiaben"></div>
										<div class="clear"></div>
									</div>
									<div class="operationBox">
										<a class="mr10" href="javascript:void(0);" @click="materialVisible = true">查看</a>
										<a href="javascript:void(0);">删除</a>
									</div>
									<div class="clear"></div>
								</li>
							</ul>
							
							<ul class="sourceForm">
								<li class="sourceFormName">颗粒物源</li>
								<li class="sourceFormTitle">
									<div class="sourceFormNav">来源</div>
									<div class="sourceFormNav">类型</div>
									<div class="sourceFormNav">PM2.5强度（ug／h）</div>
									<div class="sourceFormNav">PM2.5强度（ug／h）</div>
									<div class="sourceFormNav">操作</div>
									<div class="clear"></div>
								</li>
								<li class="sourceFormInfo" v-for="SourceFormInfo in roomInfoList.grainSourceForm">
									<div class="sourceFormNav" v-text="SourceFormInfo.source"></div>
									<div class="sourceFormNav" v-text="SourceFormInfo.type"></div>
									<div class="sourceFormNav" v-text="SourceFormInfo.strength1"></div>
									<div class="sourceFormNav" v-text="SourceFormInfo.strength2"></div>
									<div class="sourceFormNav"><a href="javascript:void(0);">删除</a></div>
									<div class="clear"></div>
								</li>
							</ul>
							
							<ul class="sourceForm">
								<li class="sourceFormName">二氧化碳源</li>
								<li class="sourceFormTitle">
									<div class="sourceFormNav">人群类型</div>
									<div class="sourceFormNav">数量</div>
									<div class="sourceFormNav">运动强度</div>
									<div class="sourceFormNav">CO2呼出量（m³／h／人）</div>
									<div class="sourceFormNav">操作</div>
									<div class="clear"></div>
								</li>
								<li class="sourceFormInfo" v-for="SourceFormInfo in roomInfoList.carbonSourceForm">
									<div class="sourceFormNav" v-text="SourceFormInfo.personType"></div>
									<div class="sourceFormNav">
										<input type="text" v-model="SourceFormInfo.num"/>
									</div>
									<div class="sourceFormNav" v-text="SourceFormInfo.strength"></div>
									<div class="sourceFormNav" v-text="SourceFormInfo.volume"></div>
									<div class="sourceFormNav"><a href="javascript:void(0);">删除</a></div>
									<div class="clear"></div>
								</li>
							</ul>
						</li>
					</ul>
					

				</div>

				<!--化学污染源详情 start-->
				<el-dialog title="材料详情" v-model="materialVisible" class="materialDetail">
				  	<div class="modalContentBox">
				  		<div class="modalContent">
				  			<div class="imgForm">
				  				<div class="imgBox">
				  					<img src="../img/sourceImg.jpg"/>
				  				</div>
				  				<div class="imgDec">
				  					<div class="decBox">
				  						<label>材料类别</label>
				  						<div class="dec">木地板/实木地板</div>
				  						<div class="clear"></div>
				  					</div>
				  					<div class="decBox">
				  						<label>品牌</label>
				  						<div class="dec">美宜佳</div>
				  						<div class="clear"></div>
				  					</div>
				  					<div class="decBox">
				  						<label>型号</label>
				  						<div class="dec">dt8999</div>
				  						<div class="clear"></div>
				  					</div>
				  					<div class="decBox">
				  						<label>材料类型</label>
				  						<div class="dec">干材料</div>
				  						<div class="clear"></div>
				  					</div>
				  					<div class="decBox">
				  						<label>规格</label>
				  						<div class="dec">-</div>
				  						<div class="clear"></div>
				  					</div>
				  					<div class="decBox">
				  						<label>生产商</label>
				  						<div class="dec">万科</div>
				  						<div class="clear"></div>
				  					</div>
				  					<div class="decBox">
				  						<label>生产日期</label>
				  						<div class="dec">2017-10-09</div>
				  						<div class="clear"></div>
				  					</div>
				  					<div class="decBox">
				  						<label>检测单位</label>
				  						<div class="dec">检验东莞实验室</div>
				  						<div class="clear"></div>
				  					</div>
				  				</div>
				  				<div class="clear"></div>
				  			</div>
				  			<div class="listForm">
				  				<ul class="wid100">
				  					<li class="listFormTitle">
				  						<div class="listSource">污染源</div>
				  						<div class="release">释放率(mg/m2.h)</div>
				  						<div class="releaseLevel">释放等级</div>
				  						<div class="clear"></div>
				  					</li>
				  					<li class="listFormDec" v-for="modalList in materialForm">
				  						<div class="listSource" v-text="modalList.source"></div>
				  						<div class="release" v-text="modalList.rate"></div>
				  						<div class="releaseLevel" v-text="modalList.level"></div>
				  						<div class="clear"></div>
				  					</li>
				  				</ul>
				  			</div>
				  			<button class="greenBtn fr" @click="closeChemistryModal">取消收藏</button>
				  			<div class="clear"></div>
				  		</div>
				  	</div>
				</el-dialog>				
				<!--化学污染源详情 end-->
				

				<!--化学污染源选择 start-->
				<el-dialog title="添加化学污染源" v-model="chemistryVisible" class="addMaterialModalBox">	
					<div class="wid100" style="border-top: 1px solid #d9d9d9;margin-bottom: 20px;"></div>
					<div class="addMaterialModalBoxContent">
						<div class="contentLeft">
							<el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark" :default-openeds="['1']">
						      	<el-submenu index="1">
						        	<template slot="title">导航一</template>
							        <el-menu-item index="1-1">选项1</el-menu-item>
							        <el-menu-item index="1-2">选项2</el-menu-item>
						          	<el-menu-item index="1-3">选项3</el-menu-item>
						        	<el-submenu index="1-4">
								        <template slot="title">选项4</template>
								        <el-menu-item index="1-4-1">选项1</el-menu-item>
						        	</el-submenu>
						      	</el-submenu>
						      	<el-menu-item index="2">导航二</el-menu-item>
						      	<el-menu-item index="3">导航三</el-menu-item>
						    </el-menu>
						</div>
						<div class="contentRight">
							<div class="secondMaterialListSelect">
								<div class="secondMenu active">共享材料库</div>
								<div class="secondMenu wrongActive">我的材料库</div>
								<div class="secondMenu wrongActive">企业材料库</div>
								<div class="secondMenu wrongActive">我的收藏</div>
								<div class="clear"></div>
							</div>
							<div class="priceAndLevelTitle">
								<div class="levelBox">
									<label>星级</label>
									<div class="levelSelectBox selectComponent">
										<template>
										  	<el-select v-model="chemistryLevel">
											    <el-option
											      v-for="item in chemistryLeveloptions"
											      :key="item.value"
											      :label="item.label"
											      :value="item.value">
											    </el-option>
										  	</el-select>
										</template>
									</div>
									<div class="levelSelectBox selectComponent">
										<template>
										  	<el-select v-model="chemistryLittleLevel">
											    <el-option
											      v-for="item in chemistryLevelLittileoptions"
											      :key="item.value"
											      :label="item.label"
											      :value="item.value">
											    </el-option>
										  	</el-select>
										</template>
									</div>
									<input type="type" class="levelInput" placeholder="输入关键词"/>
									<button class="searchBtn">搜索</button>
								</div>
								<div class="clear"></div>
							</div>
							<ul class="materialRoomList">
								<li class="listDec">
									<div class="materialControl">&nbsp;</div>
									<div class="materialBrand">品牌</div>
									<div class="materialType">材料类型</div>
									<div class="materialImg">图片</div>
									<div class="materialModel">型号</div>
									<div class="controlRequest">
										<div class="cRFirstMenu">控制要求</div>
										<div class="cRSecondMenu">
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">甲醛</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">TOVC</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">苯</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">甲苯</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">二甲苯</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="clear"></div>
										</div>
									</div>
									<div class="clear"></div>
								</li>
								<li class="materialDec" v-for="shareList in chemistryShareForm">
									<div class="materialControl">
										<el-checkbox></el-checkbox>
									</div>
									<div class="materialBrand" v-text="shareList.brand"></div>
									<div class="materialType" v-text="shareList.type"></div>
									<div class="materialImg"><img v-bind:src="shareList.src"></div>
									<div class="materialModel" v-text="shareList.model"></div>
									<div class="controlRequest">
										<div class="cRSecondMenu">
											<div class="wid20 fl tac">
											<p class="materialContent" v-text="shareList.jiaquan"></p>
											</div>
											<div class="wid20 fl tac">
												<p class="materialContent" v-text="shareList.TOVC"></p>
											</div>
											<div class="wid20 fl tac">
												<p class="materialContent" v-text="shareList.ben"></p>
											</div>
											<div class="wid20 fl tac">
												<p class="materialContent" v-text="shareList.jiaben"></p>
											</div>
											<div class="wid20 fl tac">
												<p class="materialContent" v-text="shareList.erjiaben"></p>
											</div>
											<div class="clear"></div>
										</div>
									</div>
									<div class="clear"></div>
								</li>	
							</ul>
							<ul class="materialRoomList hidden">
								<li class="listDec">
									<div class="materialControl">&nbsp;</div>
									<div class="materialBrand">品牌</div>
									<div class="materialType">材料类型</div>
									<div class="materialImg">图片</div>
									<div class="materialModel">型号</div>
									<div class="controlRequest">
										<div class="cRFirstMenu">控制要求</div>
										<div class="cRSecondMenu">
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">甲醛</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">TOVC</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">苯</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">甲苯</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">二甲苯</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="clear"></div>
										</div>
									</div>
									<div class="clear"></div>
								</li>
								<li class="materialDec" v-for="myList in chemistryMyForm">
									<div class="materialControl">
										<el-checkbox></el-checkbox>
									</div>
									<div class="materialBrand" v-text="myList.brand"></div>
									<div class="materialType" v-text="myList.type"></div>
									<div class="materialImg"><img v-bind:src="myList.src"></div>
									<div class="materialModel" v-text="myList.model"></div>
									<div class="controlRequest">
										<div class="cRSecondMenu">
											<div class="wid20 fl tac">
											<p class="materialContent" v-text="myList.jiaquan"></p>
											</div>
											<div class="wid20 fl tac">
												<p class="materialContent" v-text="myList.TOVC"></p>
											</div>
											<div class="wid20 fl tac">
												<p class="materialContent" v-text="myList.ben"></p>
											</div>
											<div class="wid20 fl tac">
												<p class="materialContent" v-text="myList.jiaben"></p>
											</div>
											<div class="wid20 fl tac">
												<p class="materialContent" v-text="myList.erjiaben"></p>
											</div>
											<div class="clear"></div>
										</div>
									</div>
									<div class="clear"></div>
								</li>
							</ul>
							<ul class="materialRoomList hidden">
								<li class="listDec">
									<div class="materialControl">&nbsp;</div>
									<div class="materialBrand">品牌</div>
									<div class="materialType">材料类型</div>
									<div class="materialImg">图片</div>
									<div class="materialModel">型号</div>
									<div class="controlRequest">
										<div class="cRFirstMenu">控制要求</div>
										<div class="cRSecondMenu">
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">甲醛</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">TOVC</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">苯</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">甲苯</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">二甲苯</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="clear"></div>
										</div>
									</div>
									<div class="clear"></div>
								</li>
								<li class="materialDec" v-for="companyList in chemistryCompanyForm">
									<div class="materialControl">
										<el-checkbox></el-checkbox>
									</div>
									<div class="materialBrand" v-text="companyList.brand"></div>
									<div class="materialType" v-text="companyList.type"></div>
									<div class="materialImg"><img v-bind:src="companyList.src"></div>
									<div class="materialModel" v-text="companyList.model"></div>
									<div class="controlRequest">
										<div class="cRSecondMenu">
											<div class="wid20 fl tac">
											<p class="materialContent" v-text="companyList.jiaquan"></p>
											</div>
											<div class="wid20 fl tac">
												<p class="materialContent" v-text="companyList.TOVC"></p>
											</div>
											<div class="wid20 fl tac">
												<p class="materialContent" v-text="companyList.ben"></p>
											</div>
											<div class="wid20 fl tac">
												<p class="materialContent" v-text="companyList.jiaben"></p>
											</div>
											<div class="wid20 fl tac">
												<p class="materialContent" v-text="companyList.erjiaben"></p>
											</div>
											<div class="clear"></div>
										</div>
									</div>
									<div class="clear"></div>
								</li>
							</ul>
							<ul class="materialRoomList hidden">
								<li class="listDec">
									<div class="materialControl">&nbsp;</div>
									<div class="materialBrand">品牌</div>
									<div class="materialType">材料类型</div>
									<div class="materialImg">图片</div>
									<div class="materialModel">型号</div>
									<div class="controlRequest">
										<div class="cRFirstMenu">控制要求</div>
										<div class="cRSecondMenu">
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">甲醛</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">TOVC</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">苯</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">甲苯</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="wid20 fl tac">
												<p class="cRSecondMenuName">二甲苯</p>
												<p>（mg/m2-h）</p>
											</div>
											<div class="clear"></div>
										</div>
									</div>
									<div class="clear"></div>
								</li>
								<li class="materialDec" v-for="hideList in chemistryHideForm">
									<div class="materialControl">
										<el-checkbox></el-checkbox>
									</div>
									<div class="materialBrand" v-text="hideList.brand"></div>
									<div class="materialType" v-text="hideList.type"></div>
									<div class="materialImg"><img v-bind:src="hideList.src"></div>
									<div class="materialModel" v-text="hideList.model"></div>
									<div class="controlRequest">
										<div class="cRSecondMenu">
											<div class="wid20 fl tac">
											<p class="materialContent" v-text="hideList.jiaquan"></p>
											</div>
											<div class="wid20 fl tac">
												<p class="materialContent" v-text="hideList.TOVC"></p>
											</div>
											<div class="wid20 fl tac">
												<p class="materialContent" v-text="hideList.ben"></p>
											</div>
											<div class="wid20 fl tac">
												<p class="materialContent" v-text="hideList.jiaben"></p>
											</div>
											<div class="wid20 fl tac">
												<p class="materialContent" v-text="hideList.erjiaben"></p>
											</div>
											<div class="clear"></div>
										</div>
									</div>
									<div class="clear"></div>
								</li>
							</ul>
							<!--分页器 start-->
							<div class="block mb20">
								<div class="fr">
									 <span class="demonstration fl">每页显示行</span>
								    <el-pagination
								      @size-change="handleSizeChange"
								      @current-change="handleCurrentChange"
								      :current-page="chemistryCurrentPage"
								      :page-sizes="[10, 20, 30, 40]"
								      :page-size="10"
								      layout="sizes, prev, pager, next"
								      :total="50"
								      class="fl">
								    </el-pagination>
								    <div class="clear"></div>
								</div>
							   <div class="clear"></div>
							</div>
							<!--分页器 end-->
							<div class="buttonBox fr">
								<a class="whiteLargerBtn mr20" @click="chemistryVisible = false" style="border: 0;">取消</a>
								<button class="greenLargerBtn" @click="addChemistrySuccessful" style="width: 80px;">确定</button>
							</div>
							<div class="clear"></div>
						</div>
						<div class="clear"></div>
					</div>
				<!--</div>-->
				</el-dialog>		
				<!--化学污染源选择 end-->
				
				<!--颗粒物源选择 start-->
				<el-dialog title="添加颗粒物污染源" class="granulePollution" v-model="particleVisible">
				  	<div class="wid100 mb20" style="border-top: 1px solid #d9d9d9;"></div>
			  		<div class="title">
			  			<div class="type">
			  				<div class="inputBox">
			  					<label>类型</label>
			  					<input type="text" class="longInput"/>
			  				</div>	
			  				<div class="inputBox">
			  					<label>PM2.5强度</label>
			  					<input type="text" class="shortInput"/>
			  					<span>至</span>
			  					<input type="text" class="shortInput"/>
			  				</div>
			  				<div class="inputBox">
			  					<label>PM10强度</label>
			  					<input type="text" class="shortInput"/>
			  					<span>至</span>
			  					<input type="text" class="shortInput"/>
			  				</div>
			  				<button class="greenBtn sure">搜索</button>
			  				<a href="javascript:void(0);">清空</a>
			  				<div class="clear"></div>
			  			</div>
			  		</div>
			  		<ul class="form">
			  			<li class="formTitle">
			  				<div class="checkBox">
			  					 <el-checkbox></el-checkbox>
			  				</div>
			  				<div class="type">类型</div>
			  				<div class="PM2">PM2.5 (μg/h)</div>
			  				<div class="PM10">PM10 (μg/h)</div>
			  				<div class="clear"></div>
			  			</li>
			  			<li class="formDec" v-for="list in particleform">
			  				<div class="checkBox">
			  					 <el-checkbox></el-checkbox>
			  				</div>
			  				<div class="type" v-text="list.type"></div>
			  				<div class="PM2" v-text="list.pm2"></div>
			  				<div class="PM10" v-text="list.pm10"></div>
			  				<div class="clear"></div>
			  			</li>
			  		</ul>
			  		<!--分页器 start-->
					<div class="block mb10">
						<div class="fr">
							 <span class="demonstration fl">每页显示行</span>
						    <el-pagination
						      @size-change="handleSizeChange"
						      @current-change="handleCurrentChange"
						      :current-page="particleCurrentPage"
						      :page-sizes="[10, 20, 30, 40]"
						      :page-size="10"
						      layout="sizes, prev, pager, next"
						      :total="50"
						      class="fl">
						    </el-pagination>
						    <div class="clear"></div>
						</div>
					   <div class="clear"></div>
					</div>
					<!--分页器 end-->
					<div class="buttonBox fr">
						<a class="whiteLargerBtn mr20" @click="particleVisible = false" style="border: 0;">取消</a>
						<button class="greenLargerBtn" @click="addParticleSuccessful" style="width: 80px;">确定</button>
					</div>
					<div class="clear"></div>
				</el-dialog>
				<!--颗粒物源选择 end-->
				
				<!--二氧化碳源选择 start-->
				<el-dialog title="添加二氧化碳源"  class="granulePollution" v-model="carbonVisible">
				  	<div class="wid100 mb20" style="border-top: 1px solid #d9d9d9;"></div>
			  		<div class="title">
			  			<div class="type">
			  				<div class="inputBox">
			  					<label>人群类型</label>
			  					<input type="text" class="longInput"/>
			  				</div>	
			  				<div class="inputBox">
			  					<label>运动强度</label>
			  					<input type="text" class="shortInput"/>
			  					<span>至</span>
			  					<input type="text" class="shortInput"/>
			  				</div>
			  				<div class="inputBox">
			  					<label>CO2呼出量</label>
			  					<input type="text" class="shortInput"/>
			  					<span>至</span>
			  					<input type="text" class="shortInput"/>
			  				</div>
			  				<button class="greenBtn sure">搜索</button>
			  				<a href="javascript:void(0);">清空</a>
			  				<div class="clear"></div>
			  			</div>
			  		</div>
			  		<ul class="form">
			  			<li class="formTitle">
			  				<div class="checkBox">
			  					 <el-checkbox></el-checkbox>
			  				</div>
			  				<div class="type">人群类型</div>
			  				<div class="PM2">运动强度</div>
			  				<div class="PM10">CO2呼出量（m³／h／人）</div>
			  				<div class="clear"></div>
			  			</li>
			  			<li class="formDec" v-for="list in carbonform">
			  				<div class="checkBox">
			  					 <el-checkbox></el-checkbox>
			  				</div>
			  				<div class="type" v-text="list.type"></div>
			  				<div class="PM2" v-text="list.pm2"></div>
			  				<div class="PM10" v-text="list.pm10"></div>
			  				<div class="clear"></div>
			  			</li>
			  		</ul>
			  		<!--分页器 start-->
					<div class="block mb10">
						<div class="fr">
							 <span class="demonstration fl">每页显示行</span>
						    <el-pagination
						      @size-change="handleSizeChange"
						      @current-change="handleCurrentChange"
						      :current-page="carbonCurrentPage"
						      :page-sizes="[10, 20, 30, 40]"
						      :page-size="10"
						      layout="sizes, prev, pager, next"
						      :total="50"
						      class="fl">
						    </el-pagination>
						    <div class="clear"></div>
						</div>
					   <div class="clear"></div>
					</div>
					<!--分页器 end-->
					<div class="buttonBox fr">
						<a class="whiteLargerBtn mr20" @click="carbonVisible = false" style="border: 0;">取消</a>
						<button class="greenLargerBtn" @click="addCarbonSuccessful" style="width: 80px;">确定</button>
					</div>
					<div class="clear"></div>
				</el-dialog>
				<!--二氧化碳源选择 end-->

			</div>
			<!--项目圈内容 end-->
		</div>
		<!--内容 end-->
		
		
	</body>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" src="../js/vueComponent.js"></script>
	<script type="text/javascript" src="../js/component.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			//获取content宽度
			var contentWidth = $(window).innerWidth() - 180;
			$('.content').css('width',contentWidth + 'px');
			//获取content最小高度
			var contentMinHeight = $(window).innerHeight() - 60;
			$('.content').css('min-height',contentMinHeight + 'px');
			
			
			//模态框中的选项菜单
			$('.chemistrySelect,.particleSelect').click(function(){
				$('.secondMenu').each(function(index){
					$(this).click(function(){
						$('.secondMenu').removeClass('active').addClass('wrongActive').eq(index).removeClass('wrongActive').addClass('active');
						$('.materialRoomList').addClass('hidden').eq(index).removeClass('hidden');
					});
				});
			});
		});
		
		
		var loginInfo = new Vue({
			el:'.loginInfo'
		});
		
		
		var sourceSetting = new Vue({
			el:'.sourceSetting',
			data(){
				return {
					//默认查看化学污染源详情的模态框是关闭的
					materialVisible:false,
					
					
					//材料库详情信息
					materialForm:[
			        	{
			        		source:'甲醛',
			        		rate:'0.5',
			        		level:'F2'
			        	},
			        	{
			        		source:'甲醛',
			        		rate:'0.5',
			        		level:'F2'
			        	},
			        ],
			        
					//默认添加化学污染源模态框是关闭的
					chemistryVisible:false,
					//化学污染源模态框下拉选择框数据
					chemistryLeveloptions: [{
			          value: '选项1',
			          label: '黄金糕'
			        }, {
			          value: '选项2',
			          label: '双皮奶'
			        }, {
			          value: '选项3',
			          label: '蚵仔煎'
			        }, {
			          value: '选项4',
			          label: '龙须面'
			        }, {
			          value: '选项5',
			          label: '北京烤鸭'
			        }],
			        chemistryLevel: '',
					chemistryLevelLittileoptions: [{
			          value: '选项1',
			          label: '黄金糕'
			        }, {
			          value: '选项2',
			          label: '双皮奶'
			        }, {
			          value: '选项3',
			          label: '蚵仔煎'
			        }, {
			          value: '选项4',
			          label: '龙须面'
			        }, {
			          value: '选项5',
			          label: '北京烤鸭'
			        }],
			        chemistryLittleLevel: '',
			        chemistryCurrentPage: 1,
					chemistryShareForm:[
			        	{
			        		brand:'德尔',
			        		type:'材料类型',
			        		src:'../img/materialImg.jpg',
			        		model:'型号',
			        		jiaquan:'0.22',
			        		TOVC:'0.5',
			        		ben:'0.8',
			        		jiaben:'0.5',
			        		erjiaben:'0.7'
			        	}
			        ],
			        chemistryMyForm:[
			        	{
			        		brand:'德尔',
			        		type:'材料类型',
			        		src:'../img/materialImg.jpg',
			        		model:'型号',
			        		jiaquan:'0.22',
			        		TOVC:'0.5',
			        		ben:'0.8',
			        		jiaben:'0.5',
			        		erjiaben:'0.7'
			        	},
			        	{
			        		brand:'德尔',
			        		type:'材料类型',
			        		src:'../img/materialImg.jpg',
			        		model:'型号',
			        		jiaquan:'0.22',
			        		TOVC:'0.5',
			        		ben:'0.8',
			        		jiaben:'0.5',
			        		erjiaben:'0.7'
			        	}
			        ],
			        chemistryCompanyForm:[
			        	{
			        		brand:'德尔',
			        		type:'材料类型',
			        		src:'../img/materialImg.jpg',
			        		model:'型号',
			        		jiaquan:'0.22',
			        		TOVC:'0.5',
			        		ben:'0.8',
			        		jiaben:'0.5',
			        		erjiaben:'0.7'
			        	},
			        	{
			        		brand:'德尔',
			        		type:'材料类型',
			        		src:'../img/materialImg.jpg',
			        		model:'型号',
			        		jiaquan:'0.22',
			        		TOVC:'0.5',
			        		ben:'0.8',
			        		jiaben:'0.5',
			        		erjiaben:'0.7'
			        	},
			        	{
			        		brand:'德尔',
			        		type:'材料类型',
			        		src:'../img/materialImg.jpg',
			        		model:'型号',
			        		jiaquan:'0.22',
			        		TOVC:'0.5',
			        		ben:'0.8',
			        		jiaben:'0.5',
			        		erjiaben:'0.7'
			        	}
			        ],
			        chemistryHideForm:[
			        	{
			        		brand:'德尔',
			        		type:'材料类型',
			        		src:'../img/materialImg.jpg',
			        		model:'型号',
			        		jiaquan:'0.22',
			        		TOVC:'0.5',
			        		ben:'0.8',
			        		jiaben:'0.5',
			        		erjiaben:'0.7'
			        	},
			        ],
					
					//默认添加颗粒物源模态框是关闭的
					particleVisible:false,
					//颗粒物源列表
					particleform:[
			        	{
			        		type:'德尔',
			        		pm2:'0.22',
			        		pm10:'0.5'
			        	},
			        	{
			        		type:'德尔',
			        		pm2:'0.22',
			        		pm10:'0.5'
			        	},
			        	{
			        		type:'德尔',
			        		pm2:'0.22',
			        		pm10:'0.5'
			        	},
			        	{
			        		type:'德尔',
			        		pm2:'0.22',
			        		pm10:'0.5'
			        	},
			        	{
			        		type:'德尔',
			        		pm2:'0.22',
			        		pm10:'0.5'
			        	}
			        ],
					particleCurrentPage:1,
					
					//默认添加二氧化碳源选择是关闭的
					carbonVisible:false,
					carbonform:[
			        	{
			        		type:'德尔',
			        		pm2:'0.22',
			        		pm10:'0.5'
			        	},
			        	{
			        		type:'德尔',
			        		pm2:'0.22',
			        		pm10:'0.5'
			        	},
			        	{
			        		type:'德尔',
			        		pm2:'0.22',
			        		pm10:'0.5'
			        	},
			        	{
			        		type:'德尔',
			        		pm2:'0.22',
			        		pm10:'0.5'
			        	},
			        	{
			        		type:'德尔',
			        		pm2:'0.22',
			        		pm10:'0.5'
			        	},
			        ],
			        carbonCurrentPage:1,
					
					
					roomNameIndex: 0,//默认显示房间1的信息
					//房间列表
					roomNameForm:[
						'房间1',
						'房间2',
						'房间3',
					],
					roomInfoForm:[
						{
							//化學污染源的數據
							chemistrySourceForm:[
								{
									typeVal:'強化米地板',
									areaVal:'161.5',
									pictureVal:'../img/materialImg.jpg',
									brandVal:'馬德蘭',
									modelVal:'環保鬥士',
									jiaquan:'0.1',
									TOVC:'0.2',
									ben:'0.3',
									jiaben:'0.4',
									erjiaben:'0.5'
								}
							],
							//颗粒物源的数据
							grainSourceForm:[
								{
									source:'大气污染源',
									type:'北京',
									strength1:'33000',
									strength2:'33000',
								}
							],
							//二氧化碳源的数据
							carbonSourceForm:[
								{
									personType:'幼儿',
									num:'',
									strength:'安静',
									volume:'0.0003466',
								}
							],
						},
						{
							//化學污染源的數據
							chemistrySourceForm:[
								{
									typeVal:'強化米地板',
									areaVal:'122225',
									pictureVal:'../img/materialImg.jpg',
									brandVal:'馬德蘭',
									modelVal:'環保鬥士',
									jiaquan:'0.1',
									TOVC:'2.2',
									ben:'5.3',
									jiaben:'4.4',
									erjiaben:'1.5'
								}
							],
							//颗粒物源的数据
							grainSourceForm:[
								{
									source:'大气污染源',
									type:'北京',
									strength1:'33000',
									strength2:'33000',
								}
							],
							//二氧化碳源的数据
							carbonSourceForm:[
								{
									personType:'幼儿',
									num:'',
									strength:'安静',
									volume:'0.0003466',
								}
							],
						},
						{
							//化學污染源的數據
							chemistrySourceForm:[
								{
									typeVal:'強化米地板',
									areaVal:'3333.5',
									pictureVal:'../img/materialImg.jpg',
									brandVal:'馬德蘭',
									modelVal:'環保鬥士',
									jiaquan:'0.1',
									TOVC:'1.2',
									ben:'1.3',
									jiaben:'1.4',
									erjiaben:'1.5'
								}
							],
							//颗粒物源的数据
							grainSourceForm:[
								{
									source:'大气污染源',
									type:'北京',
									strength1:'33000',
									strength2:'33000',
								}
							],
							//二氧化碳源的数据
							carbonSourceForm:[
								{
									personType:'幼儿',
									num:'',
									strength:'安静',
									volume:'0.0003466',
								}
							],
						},
					],
				}
			},
			created(){
				
			},
			methods:{
				//房间菜单选项控制
				activeMenu(val){
					var roomNameIndex = val; 

					var roomNameGroup = document.querySelectorAll('.roomName');
					var self = event.target;
					for(var i = 0; i < roomNameGroup.length; i++){
						roomNameGroup[i].classList.remove('roomActiveName');
					}
					self.classList.add('roomActiveName');
					this.roomNameIndex = roomNameIndex;
				},
				//关闭材料详情模态框控制
				closeChemistryModal(){
			        this.$message({
			          	message: '取消收藏成功！',
			          	type: 'success'
			        });
			        this.materialVisible = false;
			    },
			    //化学污染源材料模态框的左边面包屑控制
				handleOpen(key, keyPath) {
		        	console.log(key, keyPath);
		      	},
		      	//化学污染源材料模态框的左边面包屑控制
		      	handleClose(key, keyPath) {
		        	console.log(key, keyPath);
		      	},
		      	//化学污染源材料模态框的分页器控制
		      	handleSizeChange(val) {
			        console.log(`每页 ${val} 条`);
			    },
			    //化学污染源材料模态框的分页器控制
			    handleCurrentChange(val) {
			        this.currentPage = val;
			        console.log(`当前页: ${val}`);
			    },
			    //添加化学污染源成功
			    addChemistrySuccessful(){
		        	this.$message({
			          	message: '添加化学污染源成功！',
			          	type: 'success'
			        });
			        this.chemistryVisible = false;
			    },
			    //添加颗粒源成功
			    addParticleSuccessful(){
			        this.$message({
			          	message: '添加颗粒物源成功！',
			          	type: 'success'
			        });
			        this.particleVisible = false;
			    },
			    //添加二氧化碳源成功
			    addCarbonSuccessful(){
			        this.$message({
			          	message: '添加二氧化碳源成功！',
			          	type: 'success'
			        });
			        this.carbonVisible = false;
			    },
			},
			
		});
		

		
	</script>
</html>

</html>
